<template>
  <div class="cp_container flex">
    <div
      class="react"
      :class="{
        green: props.type == 1,
        pink: props.type == 0,
        blue: props.type == 2,
      }"
    >
      {{ title }}
    </div>
    <div>
      <h2 class="title fs-14">{{ title }}</h2>
      <div class="user_actions">
        <SvgIcon icon="icon-bofang2-copy"></SvgIcon>
        <SvgIcon icon="icon-tianjiawenjian-copy"></SvgIcon>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'rankHeader',
}
</script>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
const props = defineProps<{ type: number }>()
const title = computed(() => {
  const ind = props.type
  return ind > 1 ? '原创榜' : ind == 1 ? '新歌榜' : '飙升榜'
})
</script>

<style scoped lang="less">
.react {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 80px;
  text-align: center;
  color: #fcf8fb;
  box-shadow: 0px 5px 5px 1px #666;
}
.title {
  padding-top: 10px;
  font-weight: 600;
}
.cp_container {
  padding: 20px;
}
.pink {
  background-image: linear-gradient(to bottom right, #f6dfc1, #ce6092 60%);
}
.green {
  background-image: linear-gradient(to bottom right, #f6dfc1, #24c1c2 80%);
}
.blue {
  background-image: linear-gradient(to bottom right, #f6dfc1, #63a3d9 80%);
}
</style>

<style lang="less">
.user_actions {
  .icon {
    height: 22px;
    width: 22px;
    margin: 4px;
  }
}
</style>
